<template>
    <div class="mongoDemo">
        <div class="myStyle">mongodb Demo</div>
        
        <div class="box" >
            <el-input v-model="name" placeholder="输入姓名" />
            <el-input v-model="age" placeholder="输入年龄" />
            <el-input v-model="sex" placeholder="输入性别" />

            <el-button type="primary" @click="toCreateUser">添加新用户</el-button>
        </div> 
        <el-table :data="userList" style="width: 100%">
            <el-table-column prop="name" label="姓名" width="180" />
            <el-table-column prop="age" label="年龄" width="180" />
            <el-table-column prop="sex" label="性别" />
            <el-table-column label="Operations" width="120">
                <template #default="scope">
                    <el-button
                    type="text"
                    size="small"
                    @click="openUpdateBox(scope.row)"
                    >
                    编辑
                    </el-button>
                    <el-button
                    type="text"
                    size="small"
                    @click="delRow(scope.row._id)"
                    >
                    删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="updateBox" v-show = "showUpBox">
            <div class="box">
                <el-input v-model="upname" placeholder="输入姓名" />
                <el-input v-model="upage" placeholder="输入年龄" />
                <el-input v-model="upsex" placeholder="输入性别" />

                <el-button type="primary" @click="updateRow()">点击修改</el-button>
            </div>
        </div>
    </div>
</template>

<script>
    import {createUser,updateUser,readUser,delUser} from "../api/user/index"
    export default {
        data() {
            return {
                name:"",
                age:"",
                sex:"",

                userList:[],
                showUpBox:false,
                upname:"",
                upage:"",
                upsex:"",
                upid:"",
            }
        },
        mounted() {
            this.toReadUser();
        },
        methods: {
            //新建user
            toCreateUser(){
                let user = {
                    name:this.name,
                    age:this.age,
                    sex:this.sex,
                }

                createUser(user).then((res)=>{
                    console.log(res);
                })
            },
            //获取user
            toReadUser(){
                readUser({}).then((res)=>{
                    console.log(res);
                    this.userList = res.data;
                })
            },

            openUpdateBox(data){
                this.upname = data.name;
                this.upage = data.age;
                this.upsex = data.sex;
                this.upid = data._id;
                this.showUpBox = true;
            },
            //更新user
            updateRow(){
                console.log(this.upid);
                let user = {
                    id:this.upid,
                    name:this.upname,
                    age:this.upage,
                    sex:this.upsex,
                }

                updateUser(user).then((res)=>{
                    console.log(res);
                    this.showUpBox = false;
                    if(res.code == 200){
                        console.log(res.msg);
                          this.toReadUser();      
                    }
                })
            },
             //删除user
            delRow(id){
                console.log(id);
                delUser({id:id}).then((res)=>{
                    console.log(res);
                    if(res.code == 200){
                        console.log(res.msg);
                        this.toReadUser();
                    }
                })
            },
            
        },
        components: {}
    }
</script>

<style lang="scss">
    .mongoDemo {
        position:relative;
        width:100%;
        height:100%;
        .myStyle{
            color:$demoColor;
        }
        .updateBox{
            position:fixed;
            width:100%;
            height:100%;
            background:rgba(140,140,140,0.5);
            top:0;
            left:0;
            .box{
                width:500px;
                height:300px;
                border-radius:8px;
                background:#fff;
                margin:60px auto;
                display:flex;
                flex-direction:column;
            }
        }
    }
</style>